<template>
  <section>
  	<div class="model mywork">
  		<img :src="IMGBASE64.WODEGONGZUO2X" class="pink">
  		<span class="title">我的工作</span>
  		<div class="kong"></div>
  		<template>
				<el-table :data="tablemsg" style="width: 100%" @cell-click="showDetails">
					<el-table-column prop="id" label="#" width="70" align="center"></el-table-column>
					<el-table-column prop="content" label="内容" align="center" :show-overflow-tooltip='true'></el-table-column>
					<el-table-column prop="hasAttachmentstr" label="附件" align="center"></el-table-column>
					<el-table-column prop="sender" label="发布人" align="center"></el-table-column>
					<el-table-column prop="workDate" label="发布时间" align="center"></el-table-column>
					<el-table-column label="完成状态" align="center">
						<template scope="scope">
							<i class="el-icon-check" v-show="scope.row.yes"></i>
						</template>
					</el-table-column>
				</el-table>
        <el-pagination
          v-show="paging"
          @current-change="handleCurrentChange"
          :page-size="20"
          layout="prev, pager, next, jumper"
          :total="total"
          class="pull-right">
        </el-pagination>
  		</template>
  	</div>

    <div class="details" v-show="isDetails">
      <img :src="IMGBASE64.XIANGQING2X" class="icon">
      <span class="title">详情</span>
      <el-button icon="close" class="close" @click="detailsShow()"></el-button>
      <div class="body">
        <span>{{detailsForm.content}}</span>
        <div class="detailsPeople">
          <span>{{detailsForm.sender}}</span></br>
          <span>{{detailsForm.workDate}}</span>
        </div>
      </div>
    </div>

    <transition name="modal-shadow">
      <div class="modal-backdrop" v-show="isDetails"></div>
    </transition>
  </section>
</template>

<script>
export default {
  data () {
    return {
      isDetails: false,
      tablemsg: [],
      total: 0,
      page: 1,
      paging: true,
      detailsForm: {
        content: null,
        hasAttachmentstr: null,
        sender: null,
        workDate: null
      }
    }
  },
  mounted () {
    // let _cookie = document.cookie.split(';')
    // let _cookieArray = []
    // _cookie.forEach(v => {
    //   let _d = v.split('=')
    //   _cookieArray.push({
    //     key: _d[0],
    //     value: _d[1]
    //   })
    // })
    this.xtoken = localStorage.xtoken
    this.$http.post(this._httpUrl + 'coordinationOffice/myWork', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
      if (response.body.code === '000') {
        // console.log(response.data.data.content)
        this.tablemsg = response.data.data.rows
        for (var i = 0; i < this.tablemsg.length; i++) {
          if (this.tablemsg[i].isFinished === 0) {
            this.tablemsg[i].yes = false
          } else {
            this.tablemsg[i].yes = true
          }
        }
      } else if (response.body.code === '887') {
        this.$router.push('/')
      } else if (response.body.code === '889') {
        this.$router.push('/')
      }
    })
    // for (var i = 0; i < this.tablemsg.length; i++) {
    //   if (this.tablemsg[i].status === true) {
    //     this.tablemsg[i].yes = true
    //     // this.tablemsg[i].no = false
    //   } else {
    //     // this.tablemsg[i].yes = false
    //     this.tablemsg[i].no = true
    //   }
    // }
  },
  methods: {
    detailsShow () {
      this.isDetails = !this.isDetails
    },
    handleCurrentChange (val) {
      this.page = val
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'coordinationOffice/myWork', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          // console.log(response.data.data.content)
          this.tablemsg = response.data.data.rows
          for (var i = 0; i < this.tablemsg.length; i++) {
            if (this.tablemsg[i].isFinished === 0) {
              this.tablemsg[i].yes = false
            } else {
              this.tablemsg[i].yes = true
            }
          }
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    showDetails (rows, column) {
      if (column.label !== '操作') {
        this.detailsForm.content = rows.content
        this.detailsForm.hasAttachmentstr = rows.hasAttachmentstr
        this.detailsForm.sender = rows.sender
        this.detailsForm.workDate = rows.workDate
        this.isDetails = !this.isDetails
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
.detailsPeople{
  width: 100%;
  text-align: right;
  margin-top: 20px;
}
</style>
